import {Checkbox, Icon} from 'antd'
import filter from 'lodash/filter';
import { WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

export default class NodeItem extends React.Component {
    constructor(props) {
        super(props);
    }



    render() {
        const {item = {}, nodeSelectedUsers = []} = this.props;
        const {isShowAll = false, nodeid, users = [], names = '', nodename = ''} = item;
        const _user = (isShowAll || users.length <= 12) ? users : users.slice(0,12);
        const operatorStyle = isShowAll ? {} : {
            'height': '54px',
            'borderBottom': '1px solid #E2E2E2',
            'width': '352px',
            'paddingRight':'10px'
        };
        return (
            <div>
                <div className="node-item">
                    {!isShowAll &&
                    <div className="checkbox">
                        <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@ut040k`} checked={nodeSelectedUsers.length === users.length} onChange={this.selectOne.bind(this, nodeid)}/>
                    </div>
                    }
                    {!isShowAll &&
                    <div className="nodename" title={nodename}><span>{nodename}</span></div>
                    }
                    <div className="operator" style={operatorStyle}>
                        {
                            _user.map((u, i) => {
                                const {id = '', lastname = ''} = u;
                                const selected = filter(nodeSelectedUsers, (o) => {
                                    return o.id === id;
                                }).length > 0;
                                const userClassName = selected ? `node-user selectedUser` : 'node-user';
                                return (<span className={userClassName}
                                              onClick={this.clickOneUser.bind(this, u, selected)}>{lastname}</span>)
                            })
                        }
                        {(users.length > _user.length || isShowAll) &&
                            <span className={'node-user'} title={isShowAll ? getLabel(384083,'返回'):getLabel(17499,'更多')}>
                                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@ksse1q`} type={isShowAll ? 'double-left' : 'double-right'}
                                      onClick={this.showAllOperator.bind(this, item)}/>
                            </span>
                        }
                    </div>
                </div>
            </div>
        )
    }

    selectOne(nodeid, e) {
        const {updateSelectIds} = this.props;
        updateSelectIds(e.target.checked, nodeid);
    }

    clickOneUser(user, selected) {
        const {addOrRemoveSelectedUser, item = {}} = this.props;
        let operate = selected ? 'remove' : 'add';
        addOrRemoveSelectedUser(operate, user, item);
    }

    showAllOperator() {
        const {showAllNodeUsers, item = {}} = this.props;
        const {users = [], nodeid = '', isShowAll = false} = item;
        showAllNodeUsers({isShowAll: !isShowAll, users, nodeid})
    }
}